import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    console.log('webgl', this.WebGl);
    this.initGui();

    this.initThree();
  }

  public willUnmount() {
    this.toggleGui(0);
    cancelAnimationFrame(this.animateFrame);
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Button onClick={this.toggleGui}>移除/显示GUI</Button>
        <Button
          onClick={() => {
            console.log('data::', this.guiData);
          }}
          style={{ marginLeft: 10 }}
        >
          console数据
        </Button>
        <Divider />

        <Typography>
          <Title>Links</Title>
          <Paragraph>
            <p>
              dat.GUI - GitHub：
              <a href="https://github.com/dataarts/dat.gui" target="_blank">
                https://github.com/dataarts/dat.gui
              </a>
            </p>
            <p>
              Tween.js - GitHub：
              <a href="https://github.com/tweenjs/tween.js/" target="_blank">
                https://github.com/tweenjs/tween.js/
              </a>
            </p>
            <p>
              Three官网：
              <a href="https://threejs.org/" target="_blank">
                https://threejs.org/
              </a>
            </p>
            <p>
              stats.js - GitHub：
              <a href="https://github.com/mrdoob/stats.js" target="_blank">
                https://github.com/mrdoob/stats.js
              </a>
            </p>
            <p>
              GLSL介绍：
              <a href="https://www.jianshu.com/p/66b10062bd67" target="_blank">
                https://www.jianshu.com/p/66b10062bd67
              </a>
            </p>
          </Paragraph>
          <Title level={3}>开始</Title>
          <Paragraph>
            <Text>不要急，慢慢来</Text>
          </Paragraph>
        </Typography>

        <div id="WebGL-output" style={{ width: '600px', height: '600px' }} />
      </Card>
    );
  }

  private GuiInit: any = null;
  private GuiController: any = null;
  private guiData: any = {
    x: 0.005,
    y: '20',
    z: 30,
    color: '#dcdcdc',
  };
  private initGui = () => {
    if (!this.GuiInit) {
      this.GuiInit = new this.WebGl.dat.GUI({
        // autoPlace: false
      });
    }
    this.GuiInit.domElement.style.position = 'absolute';
    this.GuiInit.domElement.style.right = '10px';
    this.GuiInit.domElement.style.top = '10px';

    this.GuiController = this.GuiInit.addFolder('测试');
    this.GuiController.add(this.guiData, 'x', -0.1, 0.1, 0.005).name(
      '自转速度',
    );
    this.GuiController.add(this.guiData, 'y');
    this.GuiController.add(this.guiData, 'z');
    this.GuiController.addColor(this.guiData, 'color').name('背景颜色');
    this.GuiController.open();
  };
  private toggleGui = (state: any = null) => {
    let display = this.GuiInit.domElement.style.display == 'none' ? '' : 'none';
    if (state == 0) {
      display = 'none';
    }
    // this.GuiController.close()
    this.GuiInit.domElement.style.display = display;
  };

  private animateFrame: any;
  private initThree = () => {
    let that = this;
    let camera: any, scene: any, renderer: any;
    let group: any;
    let container: any = document.getElementById('WebGL-output');
    let width = container.clientWidth,
      height = container.clientHeight;

    init();
    animate();

    function init() {
      scene = new that.WebGl.Three.Scene();
      group = new that.WebGl.Three.Group();
      scene.add(group);

      camera = new that.WebGl.Three.PerspectiveCamera(
        60,
        width / height,
        1,
        2000,
      );
      camera.position.x = -10;
      camera.position.y = 15;
      camera.position.z = 500;
      camera.lookAt(scene.position);

      //控制地球
      // let orbitControls = new /*THREE.OrbitControls*/Orbitcontrols(camera);
      // orbitControls.autoRotate = false;
      // let clock = new THREE.Clock();
      //光源
      let ambi = new that.WebGl.Three.AmbientLight(0x686868);
      scene.add(ambi);

      let spotLight = new that.WebGl.Three.DirectionalLight(0xffffff);
      spotLight.position.set(550, 100, 550);
      spotLight.intensity = 0.6;

      scene.add(spotLight);
      // Texture
      let loader = new that.WebGl.Three.TextureLoader();
      let planetTexture = require('@/assets/aa.jpg');

      loader.load(planetTexture, (texture) => {
        let geometry = new that.WebGl.Three.SphereGeometry(200, 20, 20);
        let material = new that.WebGl.Three.MeshBasicMaterial({
          map: texture,
          overdraw: 0.5,
        });
        let mesh = new that.WebGl.Three.Mesh(geometry, material);
        group.add(mesh);
      });

      renderer = new that.WebGl.Three.WebGLRenderer();
      renderer.setClearColor(0xffffff);
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      container.appendChild(renderer.domElement);
    }

    function animate() {
      that.animateFrame = requestAnimationFrame(animate);
      render();
    }
    function render() {
      renderer.setClearColor(that.guiData.color, 1.0);
      group.rotation.y -= that.guiData.x; //这行可以控制地球自转
      renderer.render(scene, camera);
    }
  };
}
